<template>
  <div>
    <input
      type="text"
      placeholder="输入要搜索的关键字"
      v-if="isShow"
      ref="inp"
    />
    <button v-else @click="searchFn">
      点击搜索,出输入框并马上处于激活状态
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    async searchFn() {
      this.isShow = true; // 点击显示输入框, 隐藏按钮
      // this.$refs.inp.focus() // 让输入框处于激活状态

      // 发现报错了, this.$refs.inp是个undefined(没获取到dom标签)
      // 因为数据isShow改变后, "异步"显示input, 而代码会继续往下走所以还没获取到input, 所以是undefined

      // 解决: 在dom更新后, 会触发$nextTick里的回调函数
      // this.$nextTick(() => {
      //   this.$refs.inp.focus();
      // });
      console.log(this.$nextTick()); // 返回一个Promise对象
      // async/await写法 (推荐)
      await this.$nextTick;
      // 异步执行完之后走到下一步
      this.$refs.inp.focus();
    },
  },
};
</script>